@import "@stackstorm/st2-style/colors.css";

.component {
}

.label {
  font-size: 12px;
  font-weight: bold;
  line-height: 11px;

  display: inline-block;

  padding: 8px 10px;

  text-align: center;
  vertical-align: middle;
  white-space: nowrap;

  color: #fff;
  border-radius: 2px;
  background-color: #777;

  border: 1px solid #fff;
  box-sizing: border-box;

  &:before {
    font-family: "brocadeicons";
    font-size: 9px;
    font-weight: normal;
    font-style: normal;

    display: inline-block;

    margin-right: 3px;

    vertical-align: baseline;
  }
}

.primary {
  background-color: #428bca;
}

.info {
  background-color: #5bc0de;
}

.warning {
  background-color: #FF6600;

  &:before {
    display: none;

    content: "\e967";
  }
}

.danger,
.failed {
  background-color: #E63544;
  
  &:before {
    display: none;

    content: "\e940";
  }
}

.success,
.succeeded {
  background-color: #00BD49;
  
  &:before {
    display: none;

    content: "\e968";
  }
}

.progress {
  &:before {
    content: "\e94b";
    animation: spin 2s infinite linear;
  }
}

.short .label {
  overflow: hidden;

  box-sizing: border-box;
  width: 16px;
  height: 16px;
  padding: 2px 2.5px;

  color: transparent;
  border-radius: 50%;

  &:before {
    display: initial;

    color: white;

    font-weight: bold;

    vertical-align: bottom;
  }
}

.short .progress {
  animation: breathe 1s ease-in-out infinite alternate;

  &:before {
    content: none;
    animation: none;
  }
}

@keyframes breathe {
  0% {
    background-color: var(--grey-lighten-1);
  }
  100% {
    background-color: var(--grey-lighten-3);
  }
}
